
import './Home.scss'
import { useState } from 'react'
import { useMount } from 'ahooks'

import { GetIndexedDB } from '../../Utils/IndexedDB'
import { TemplateMapping } from '../../Utils/HomeConfig'


const Home = ({ PageEvent }) => {
    const [LayoutTemp, setLayoutTemp] = useState([])
    const [HomeTempConfig, setHomeTempConfig] = useState({})

    const getHome = async () => {
        const { HomeTempConfig, LayoutTemp } = await GetIndexedDB('home')
        setLayoutTemp(LayoutTemp)
        setHomeTempConfig(HomeTempConfig)
    }
    useMount(() => getHome())
    PageEvent.useSubscription(val => {
        const { type, data } = val
        if (type === 'updataHome') getHome()
    })

    return (
        <div className='Home'>
            {LayoutTemp.map(item => {
                const { i, w, h, x, y } = item
                const [temp] = i.split('__')
                const style = { gridArea: `${y + 1} / ${x + 1} / ${y + h + 1} / ${w + x + 1}` }
                const Template = TemplateMapping[temp]
                return (
                    <div key={i} style={style}>
                        <Template config={HomeTempConfig[i]} render />
                    </div>
                )
            })}
        </div>
    )
}

export default Home